/*
 * @Author: xiaosihan 
 * @Date: 2021-12-20 15:45:51 
 * @Last Modified by: xiaosihan
 * @Last Modified time: 2022-04-12 20:00:21
 */

import { Camera, Color, DoubleSide, Group, LinearSRGBColorSpace, Mesh, MeshBasicMaterial, PlaneGeometry, RepeatWrapping, SRGBColorSpace, Scene, TextureLoader, Vector3, WebGLRenderer } from "three";
import ThreeBase from "three-base";
import { LineSegments2 } from "three/examples/jsm/lines/LineSegments2";
import homeStore from "../homeStore";
import floorPNG from "../img/floor.png";
import Btn from "./BtnItem/Btn";
import BtnItem from "./BtnItem/BtnItem";
import RingMesh from "./BtnItem/RingMesh";
import LightPoint from "./BtnItem/lightPoint";
import { DynamicFloor } from "./DynamicFloor";
import threeLoader from "three-base/threeLoader";

/**
 * 主页的场景
 */
class HomeRenderer extends ThreeBase {

    constructor() {
        super();

        // 添加地板
        this.addPlane();

        // 添加中间的按钮
        this.addCenter();

        this.addBtns();

        this.resetLookAt({
            position: new Vector3(322, 482, 933),
            center: new Vector3(0, 0, 294)
        });
    }

    btnGroup: BtnItem[] = [];

    init() {
        super.init();

        // 禁用控制器
        this.controls.screenSpacePanning = false;
        this.controls.enabled = true;
        this.controls.enablePan = false;
        this.controls.autoRotate = true;
        this.controls.autoRotateSpeed = 1;
        this.controls.maxPolarAngle = Math.PI / 180 * 89;
        this.renderer.outputColorSpace = LinearSRGBColorSpace;
        this.scene.background = new Color("#113866");
        // this.controls.maxPolarAngle = Math.PI / 180 * 55;
        // this.controls.minPolarAngle = Math.PI / 180 * 55;

        this.controls.addEventListener("change", () => {
            const { position } = this.getLookAt();
            if (position.x < -200) {
                this.controls.autoRotateSpeed = -1;
            }
            if (position.x > 200) {
                this.controls.autoRotateSpeed = 1;
            }
        });

        threeLoader.addEventListener("onLoad", () => {
            this.openBtn();
        });

    }

    // 添加按钮
    addBtns() {
        [
            {
                text: "二级菜单1",
                customScale: 1.4,
                delay: 0,
                onClick: () => console.log("二级菜单1"),
                position: { x: -267.84, y: 20, z: 544 }
            },
            {
                text: "二级菜单2",
                customScale: 1.4,
                delay: 200,
                onClick: () => console.log("二级菜单2"),
                position: { x: -90, y: 20, z: 544 }
            },
            {
                text: "二级菜单3",
                customScale: 1.4,
                delay: 400,
                onClick: () => console.log("二级菜单3"),
                position: { x: 90, y: 20, z: 544 }
            },
            {
                text: "二级菜单4",
                customScale: 1.4,
                delay: 600,
                onClick: () => console.log("二级菜单4"),
                position: { x: 267.84, y: 20, z: 544 }
            },

            {
                text: "二级菜单5",
                customScale: 1,
                delay: 1400,
                onClick: () => console.log("二级菜单5"),
                position: { x: -106.84, y: 20, z: 400 }
            },
            {
                text: "二级菜单6",
                customScale: 1,
                delay: 1600,
                onClick: () => console.log("二级菜单6"),
                position: { x: 106.84, y: 20, z: 400 }
            },
            {
                text: "二级菜单7",
                customScale: 1,
                delay: 2400,
                onClick: () => console.log("二级菜单7"),
                position: { x: -200, y: 20, z: 280 }
            },
            {
                text: "二级菜单8",
                customScale: 1,
                delay: 2600,
                onClick: () => console.log("二级菜单8"),
                position: { x: 0, y: 20, z: 280 }
            },
            {
                text: "二级菜单9",
                customScale: 1,
                delay: 2800,
                onClick: () => console.log("二级菜单9"),
                position: { x: 200, y: 20, z: 280 }
            },

        ].map((item, i) => {
            const btnItem = new BtnItem(item.text);
            const { x, y, z } = item.position;

            btnItem.endPosition.set(x, y, z);
            btnItem.delay = item.delay;
            btnItem.customScale = item.customScale;
            btnItem.userData = { cursor: "pointer" };
            btnItem.addEventListener("click", item.onClick);

            this.btnGroup.push(btnItem);

            this.scene.add(btnItem);
        });
    }

    // 添加中间的按钮
    addCenter() {
        const centerBtn = new Btn("一级菜单");
        centerBtn.position.set(0, 230, 0);
        centerBtn.padding = 20;
        centerBtn.customScale = 2;
        centerBtn.userData = { cursor: "pointer" };
        centerBtn.addEventListener("click", async () => {
            this.closeBtn();
            await new Promise(resolve => setTimeout(resolve, 500));
            this.openBtn();
        });

        this.scene.add(centerBtn);

        const LinghtPoint = new LightPoint();
        const LinghtPointBox = new Group();
        LinghtPointBox.add(LinghtPoint);
        LinghtPointBox.position.set(0, 230, 0);
        LinghtPoint.position.set(0, -33, 0);
        LinghtPoint.onAfterRender = (renderer: WebGLRenderer, scene: Scene, camera: Camera) => {
            LinghtPointBox.lookAt(camera.position);
        };
        this.scene.add(LinghtPointBox);

        const ringMesh = new RingMesh();
        ringMesh.position.set(0, 20, 0);
        ringMesh.scale.set(5, 5, 5);
        this.scene.add(ringMesh);

        // 菱形线段
        const lineDiamond = new LineSegments2();
        lineDiamond.geometry.setPositions([
            0, 180, 0, 50, 90, 0,
            0, 180, 0, -50, 90, 0,
            0, 180, 0, 0, 90, 50,
            0, 180, 0, 0, 90, -50,

            50, 90, 0, 0, 10, 0,
            -50, 90, 0, 0, 10, 0,
            0, 90, 50, 0, 10, 0,
            0, 90, -50, 0, 10, 0,

            50, 90, 0, 0, 90, 50,
            50, 90, 0, 0, 90, -50,
            0, 90, 50, -50, 90, 0,
            0, 90, -50, -50, 90, 0,
        ]);

        lineDiamond.material.linewidth = 2;
        lineDiamond.material.color.set("#0dddff");
        lineDiamond.onBeforeRender = (renderer) => {
            renderer.getSize(lineDiamond.material.resolution);
            lineDiamond.rotation.y -= 0.01;
        }

        this.scene.add(lineDiamond);

    }

    // 添加地板
    addPlane() {
        const planeGeo = new PlaneGeometry(10000, 10000, 1, 1);
        const map = new TextureLoader().load(floorPNG);
        map.wrapS = map.wrapT = RepeatWrapping;
        map.repeat.set(20, 20);
        const material = new MeshBasicMaterial({
            map,
            color: "#eef",
            transparent: false,
            opacity: 1,
            side: DoubleSide
        });
        const planeMesh = new Mesh(planeGeo, material)
        planeMesh.rotateX(Math.PI / -2);

        // 地板的点击事件
        planeMesh.addEventListener("click", (e: any) => {
            homeStore.setPosition(e.point.x, e.point.y, e.point.z);
        });

        this.scene.add(planeMesh);

        const dynamicFloor = new DynamicFloor();
        this.scene.add(dynamicFloor);
    }

    // 展开按钮
    openBtn = () => {
        this.btnGroup.map(btn => btn.open());
    }

    // 收起按钮
    closeBtn = () => {
        this.btnGroup.map(btn => btn.close());
    }

    render() {
        super.render();
    }

}

const homeRenderer = window.homeRenderer = new HomeRenderer();

export default homeRenderer;

